<template>
  <view class="user-list-modal" @click.self="close">
    <view class="user-list-container">
      <view class="user-list-header">
        <text class="user-list-title">在线用户 ({{ users.length }})</text>
        <view class="close-btn" @click="close">
          <FeatherIcon name="x" size="20" color="#333" />
        </view>
      </view>
      <view class="search-box">
        <FeatherIcon name="search" size="16" color="#999" />
        <input
          type="text"
          v-model="searchText"
          placeholder="搜索用户"
          placeholder-class="search-placeholder"
          confirm-type="search"
        />
      </view>
      <scroll-view scroll-y class="user-scroll-area">
        <view class="user-grid">
          <view
            class="user-item"
            v-for="(user, index) in filteredUsers"
            :key="index"
            @click="openUserHomePage(user.homePage)"
          >
            <image
              class="user-avatar"
              :src="user.userAvatarURL48"
              mode="aspectFill"
            ></image>
            <text class="user-name">{{ user.userName }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import FeatherIcon from "@/components/FeatherIcon.vue";
import { ref, computed } from "vue";

const props = defineProps({
  users: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["close"]);
const searchText = ref("");

// 过滤用户列表
const filteredUsers = computed(() => {
  if (!searchText.value) return props.users;
  return props.users.filter((user) =>
    user.userName.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

// 关闭用户列表
const close = () => {
  emit("close");
};

// 打开用户主页
const openUserHomePage = (url) => {
  if (!url) return;

  // 使用内置浏览器打开链接
  // #ifdef APP-PLUS
  plus.runtime.openURL(url);
  // #endif

  // #ifdef H5
  window.open(url, "_blank");
  // #endif
};
</script>

<style lang="scss" scoped>
.user-list-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;

  .user-list-container {
    width: 85%;
    max-width: 650rpx;
    max-height: 80vh;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .user-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #f0f0f0;

      .user-list-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }

      .close-btn {
        width: 50rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background-color: #f5f5f5;

        &:active {
          background-color: #e5e5e5;
        }
      }
    }

    .search-box {
      margin: 20rpx 30rpx;
      padding: 12rpx 24rpx;
      background-color: #f5f5f5;
      border-radius: 40rpx;
      display: flex;
      align-items: center;

      input {
        margin-left: 16rpx;
        height: 60rpx;
        flex: 1;
        font-size: 26rpx;
      }

      .search-placeholder {
        color: #999;
        font-size: 26rpx;
      }
    }

    .user-scroll-area {
      flex: 1;
      max-height: 700rpx;
      padding: 10rpx 20rpx 30rpx;
    }

    .user-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .user-item {
        width: 20%;
        min-width: 110rpx;
        max-width: 130rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16rpx 8rpx;

        &:active {
          opacity: 0.7;
        }

        .user-avatar {
          width: 90rpx;
          height: 90rpx;
          border-radius: 50%;
          object-fit: cover;
          box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
          background-color: #f0f0f0;
          margin-bottom: 12rpx;
        }

        .user-name {
          font-size: 24rpx;
          color: #333;
          text-align: center;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
